<template>
    <div>
        <div id="jx-contain">
            <!-- 专科版本需求实验环境添加延迟 -->
            <div class="maskLeft">
                <div class="maskLeft-list">
                    <i class="iconfont icon-ziyuanldpi1"></i>
                    <p>正在实验</p>
                    <p class="time ">
                        <CountDown @closed='closeTime' :isShow = isShow></CountDown>
                    </p>
                    <p style="font-size:14px;">后自动停止环境</p>
                    <div class="btnlist">
                        <el-button class="button-style btns btns-continue" @click="ContinueExperiment "><i class="iconfont icon-bofang1"></i> 继续实验</el-button>
                        <el-button class="button-style btns btns-delay" @click="ExtendTime"><i class="iconfont icon-shijian00"></i> 延长一小时</el-button>
                        <el-button class="button-style btns btns-close" @click="CloseExperiment"><i class="iconfont icon-ziyuanldpi"></i>  关闭实验</el-button>
                    </div>
                </div>
            </div>
            <div class="no-data-tips" v-if="displayVersion == ''">
               <img src="./../../../assets/images/index_no_data.png" />
               <p>暂无内容</p>
            </div>
            <!-- yx修改添加身份判断 -->

            <div v-else>
                <iframe id="iframetest" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')" @load="iframetest" name="iframetest" width="100%" :height="hei" class="coursewareBox" :src="'../../../../static/generic/web/viewer.html?file=/tes/course/'+courseId+/chapter/+ChapterId+'/resource/read'" frameborder="0" ></iframe>
                <iframe id="iframetest" v-if="roles == 'STUDENT'"  name="iframetest" width="100%" :height="hei" class="coursewareBox"  @load="iframeStudent" :src="'../../../../static/generic/web/viewer.html?file=/tes/course/'+courseId+/chapter/+ChapterId+'/resource/read'" frameborder="0" ></iframe>
                <!-- <iframe id="iframetest" name="iframetest"  v-if="displayVersion != ''" :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" :src="'../../../../static/generic/web/viewer.html?file=/tes/course/'+courseId+/chapter/+ChapterId+'/resource/read'" frameborder="0"></iframe> -->
                <!-- <iframe :width="wid" :height="hei" allowfullscreen="true" allowtransparency="true" class="coursewareBox" :src="displayVersion" frameborder="0"></iframe> -->
                 <div class="sideBox">
                    <ul v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER') && _btn_flag == undefined">
                        <li @click="detalList" ><i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>列表</li>
                        <li @click="drawShowEvent" v-if="displayVersion != ''"><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <!-- 专科版本需求 视频不存在时要隐藏 -->
                        <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
                        <li @click="openNoteWindow" v-if="displayVersion != ''" title="按页批注"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                        <li class="sideBoxActive" v-else title="按页批注"><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                        <li class="clearMarginBottom" @click="openQuestion" v-if="UserStatus == 'EXIST_CLASS' && displayVersion != ''" title="按页提问"><i :class="{ askPoint : notificationActive==true }"></i><i class="iconfont icon-wenda2"></i>提问</li>
                        <li
                            class="sideBoxActive"
                            :class="[classId ?'clearMarginBottom' : '']"
                            v-else
                        >
                            <i class="iconfont icon-wenda2" title="按页提问"></i>提问
                        </li>
                        <li
                            v-if="classId"
                            class="stastics clearMarginBottom"
                        >
                            <router-link
                                tag="a"
                                target="_blank"
                                :to="{
                                    path:'/TSClassQuestioningDetails',
                                    query: {
                                        classId,
                                        courseId,
                                        type: 1
                                    }
                                }"
                            >
                                统计
                            </router-link>
                        </li>
                    </ul>
                    <ul v-if="roles == 'STUDENT' && _btn_flag == undefined">
                        <!-- 学生端和白哥确定过没有画笔所以注释 -->
                        <!-- 专科版本需求 视频不存在时要隐藏 -->
                        <!-- <li @click="drawShowEvent" v-if="displayVersion != ''"><i class="iconfont icon-bianji-shi"></i>画笔</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-bianji-shi"></i>画笔</li>-->
                        <li @click="detalList" ><i class="iconfont icon-liebiao" title="详情" style="font-size:24px"></i>列表</li>
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
                        <li @click="openNoteWindow" v-if="displayVersion != ''"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>
                    <!-- 技能库进入 -->
                    <!-- 技术库没有专科中的 ‘列表’功能 -->
                    <ul v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER') &&_btn_flag">
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
                        <li @click="openNoteWindow" v-if="displayVersion != ''" title="按页批注" class="clearMarginBottom"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>批注</li>
                        <li
                            class="sideBoxActive"
                            :class="[classId ?'clearMarginBottom' : '']"
                            v-else title="按页批注"><i class="iconfont icon-ico_compile_thick"></i>批注
                        </li>
                        <li
                            v-if="classId"
                            class="stastics clearMarginBottom"
                        >
                            <router-link
                                tag="a"
                                target="_blank"
                                :to="{
                                    path:'/TSClassQuestioningDetails',
                                    query: {
                                        classId,
                                        courseId
                                    }
                                }"
                            >
                                统计
                            </router-link>
                        </li>
                    </ul>
                     <ul v-if="roles == 'STUDENT' && _btn_flag" >
                        <li @click="videoDialog" v-if="videoUrlCopy != ''"><i class="iconfont icon-shipin1"></i>视频</li>
                        <!-- <li class="sideBoxActive" v-else><i class="iconfont icon-shipin1"></i>视频</li> -->
                        <li @click="openNoteWindow" v-if="displayVersion != ''"><i :class="{ notePoint : noteActive==true }"></i><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                        <li class="sideBoxActive" v-else><i class="iconfont icon-ico_compile_thick"></i>笔记</li>
                    </ul>

                </div>
            </div>

        </div>
        <!-- 视频盒子 -->
        <el-dialog
            title="视频"
            :visible.sync="dialogVisible2"
            width="40%"
            @close='closeVideoDialog'
            >
            <!-- <video id="video" autoplay controls disablePictureInPicture  controlslist="nodownload"  class="videoShow" >
                 <source  :src="videoUrl" type="video/mp4">
            </video> -->
            <video id="videoSource"    class="video-js vjs-default-skin vjs-big-play-centered" controls  preload="auto" data-setup='{}' width="100%" height="346"  style="object-fit:fill" >
                <source  :src="videoUrl" >
            </video>
        </el-dialog>
        <!-- 专科版本添加详情盒子 -->
        <div class="detailBox blocks">
            <div class="chapterList-top">
                <p class="fl">章节列表</p>
                <div class="fr"><i class="iconfont icon-Group-" @click="deleteFns"></i></div>
            </div>
            <el-collapse  accordion v-model="activeName" @change="handleChange">
                <div v-for="(item,index) in appList"  :key="index" >
                    <el-collapse-item v-if="item.levels == 3" :name='index'>
                        <template slot="title">
                            <div class="collapsTitle">
                                <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                <i class="iconfont icon-baoguofahuo" v-else></i>
                                <span class="collapsTitle_span">单元{{index+1}}&nbsp;{{item.name}}</span>
                            </div>
                        </template>
                        <div v-if="item.children.length > 0">
                            <div v-for="(items,indexs) in item.children"  :key="indexs" >
                                <div class="courseName">
                                    {{indexs+1}}&nbsp;{{items.name}}&nbsp;
                                    <i class="iconfont icon-diannao-copy" v-if="items.type == 2 || items.type == 3" style="vertical-align:baseline"></i>
                                    <i class="iconfont icon-tubiaozhizuomoban1"  v-if="items.type == 4"></i>
                                </div>
                                <!-- 多加数据为空 -->
                                <div v-if="items.otherInfo.length <=0 ">
                                    <span style="padding-left:18px; color:rgb(66, 66, 66)">暂无数据</span>
                                </div>
                                <div class="detailbox"  v-for="(item3,index3) in items.otherInfo"  :key="index3" @click="EnteDetails(item3,item,items)" >
                                    <div class="infoName" :class="item3.type == 1 && item3.id == ChapterId? 'studying':''">
                                        <i class="iconfont icon-42" v-if="!item3.show " style="color:#424242"></i>
                                        <span class="crile" :class="item3.type == 1 && item3.id == ChapterId? 'crileBg':''" v-else></span>
                                        <span class="Tiltlefiles" v-if="item3.show">{{item3.name}}</span><i class="iconfont icon-diannao-copy" v-if="item3.experimentCourseFlag && item3.name != '实验学习'"></i>
                                        <span class="Tiltlefiles" v-if="!item3.show " style="color:#424242">{{item3.name}}</span>
                                    </div>
                                    <div class="fr studying" v-if="item3.type == 1 && item3.id == ChapterId">正在学<i class="iconfont icon-shijian00"></i></div>
                                </div>
                            </div>
                        </div>
                        <div v-else>暂无数据</div>
                    </el-collapse-item>
                    <el-collapse-item  v-if="item.levels == 2" :name='index'>
                        <template slot="title">
                             <div class="collapsTitle">
                                <i class="iconfont icon-chaibaoguoqujian" v-if="openFlag == String(index) "></i>
                                <i class="iconfont icon-baoguofahuo" v-else></i>
                                <span class="collapsTitle_span">章节{{index+1}}&nbsp;{{item.name}}&nbsp;</span>
                                <i class="iconfont icon-diannao-copy" v-if="item.type == 2 || item.type == 3" style="vertical-align:baseline"></i>
                                <i class="iconfont icon-tubiaozhizuomoban1"  v-if="item.type == 4"></i>
                             </div>
                        </template>
                        <div v-if="item.otherInfo.length > 0">
                            <div class="detailbox" style="padding:0px" v-for='(item2,index4) in item.otherInfo' :key="index4" @click="EnteDetails(item2,item)" >
                                <div class="infoName" :class="item2.type == 1 && item2.id == ChapterId? 'studying':''">
                                    <i class="iconfont icon-42" v-if="!item2.show " style="color:#424242" ></i>
                                    <span class="crile" :class="item2.type == 1 && item2.id == ChapterId? 'crileBg':''" v-else></span>
                                    <span class="Tiltlefiles" v-if="item2.show">{{item2.name}}</span><i class="iconfont icon-diannao-copy" v-if="item2.experimentCourseFlag && item2.name != '实验学习'"></i>
                                    <span class="Tiltlefiles" v-if="!item2.show " style="color:#424242">{{item2.name}}</span>
                                </div>
                                <div class="fr studying" v-if="item2.type == 1 && item2.id == ChapterId" >正在学<i class="iconfont icon-shijian00"></i></div>
                            </div>
                        </div>
                        <div v-else style="padding-left:25px;">暂无数据</div>
                    </el-collapse-item>
                </div>
            </el-collapse>
        </div>
         <!-- 专科版本弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-virtual dialogList" title="提示" :visible.sync="dialogVirtual" width="460px">
            <div class="dialog-content">
                <i class="iconfont icon-tishi"></i>
                <p>有其它实验正在进行中，是否停止它进入该实验?</p>
            </div>
            <span slot="footer" class="dialog-footer btnlist">
                <el-button class="button-style" @click="dialogVirtual = false">取 消</el-button>
                <el-button class="button-style" @click="VirtualSave">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 笔记盒子 -->
        <div class="el-dialog__wrapper el-annotation" id="onlyDialog" v-if="(roles == 'TEACHER' || roles == 'MARKET_TEACHER' || roles == 'UNIVERSITY_TEACHER')">
            <div role="dialog" aria-modal="true" aria-label="批注" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">批注</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                    <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                        <button @click="clearContent" class="button-style clear" :class="{ active: noteVal.length > 0 }" style="margin-left:6px;">清除</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 学生笔记盒子 -->
        <div class="el-dialog__wrapper el-notes" id="onlyDialog" v-if="roles == 'STUDENT'">
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 490px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">笔记</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeNoteWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <el-input id="noteVal" type="textarea" v-model="noteVal" style="width: 450px; height: 200px;"></el-input>
                    <!-- <textarea id="noteVal" v-model="noteVal" style="width: 450px; height: 200px;"></textarea> -->
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer">
                        <button @click="NoteSave" class="button-style saveNote">保存</button>
                        <button @click="clearContent" class="button-style clear" :class="{ active: noteVal.length > 0 }" style="margin-left:6px;">清除</button>
                    </span>
                </div>
            </div>
        </div>
        <!-- 提问盒子 -->
        <div class="el-dialog__wrapper" id="issueDialog" v-show="dialogVisible4" @close='closeDialg' :close-on-click-modal="false">
            <div role="dialog" aria-modal="true" aria-label="笔记" class="el-dialog" style="margin-top: 15vh; width: 410px;">
                <div class="el-dialog__header">
                    <span class="el-dialog__title">提问</span>
                    <button type="button" aria-label="Close" class="el-dialog__headerbtn"><i  @click="closeIssueWindow" class="el-dialog__close el-icon el-icon-close"></i></button>
                </div>
                <div class="el-dialog__body">
                    <ul>
                        <li v-for="(item, index) in questionData.quizList">
                            <p>
                               <span class="titleHead">{{ item.quizType == 1 ? '判断题' : '问答题'}}</span>
                               <span class="titleName">{{ item.quizName }}</span>
                               <span class="tltleBtnBox">
                                   <button @click="getShortEvent(item.quizType,item.quizId,item.quizName)" class="button-style getQueShort" v-if="!item.running">提问</button>
                                   <button @click="CloseQuestion(item.quizId)" class="button-style getQueShort" v-else>关闭</button>
                                </span>
                            </p>
                            <i class="clear-fix"></i>
                             <!-- 关闭提问显示内容 -->
                            <p v-if="!item.running">
                                 <!-- yx修改 如果数组中包含当前id值赋值 -->
                                <strong v-if="questionIdArr.includes(item.quizId)"  class="askEnd" >
                                    <span class="active"><button  class="button-style ownDetail">最近</button></span>
                                    <span class="answered">已回答：{{ askEnd[item.quizId].totalCount}}人</span>
                                    <span class="level">正确率 {{ askEnd[item.quizId].correctPercent }}</span>
                                    <a @click="getDetailEvent(item.quizId)" class="ownDetail" href="javascript:;"> 详情</a>
                                </strong>
                                <span class="answered">已回答：{{ item.answerCount }}{{item.quizType==1?'人':'次'}}</span>
                                <span class="level" v-if="item.quizType == 1">正确率 {{ item.correctPercent }} </span>
                                <span class="level" v-else>
                                    <i>优 {{ item.excellentPercent }}</i>
                                    <i>良 {{ item.goodPercent }}</i>
                                    <i>差 {{ item.poorPercent }}</i>
                                </span>
                                <span class="delBtnBox" @click="DeleteQuestion(item.quizId)"><button class="button-style delQue">删除</button></span>
                            </p>

                            <p v-else>学生正在答题中...</p>
                            <i class="clear-fix"></i>
                        </li>

                    </ul>
                </div>
                <div class="el-dialog__footer">
                    <span  class="dialog-footer dialogHr">
                        <i @click="issueAddEvent" class="issueAddBtn">+</i>
                    </span>
                </div>
            </div>
        </div>
        <!-- 绘画盒子 -->
        <div id="drawBox">
            <i @click="drawTypeChange('rect','squre')" class="squre type"></i>
            <i @click="drawTypeChange('circle','circle')" class="circle type"></i>
            <i @click="drawTypeChange('pen','pen')" class="pen type iconfont icon-icon--"></i>
            <i class="recall iconfont icon-fanhui2"></i>
            <i class="clean">清除</i>
            <i class="exit">退出</i>
            <div id="penOption">
                <div></div>
                <div>
                    <i @click="penSizeChange('6','point1')" class="point point1"><span></span></i>
                    <i @click="penSizeChange('10','point2')" class="point point2"><span></span></i>
                    <i @click="penSizeChange('14','point3')" class="point point3"><span></span></i>
                    <i @click="penColorChange('#ff0f00','colorRed')" class="colorBtn colorRed"></i>
                    <i @click="penColorChange('#ffbe00','colorYel')" class="colorBtn colorYel"></i>
                    <i @click="penColorChange('#1a9bff','colorBul')" class="colorBtn colorBul"></i>
                    <i @click="penColorChange('#1aad19','colorGre')" class="colorBtn colorGre"></i>
                    <i @click="penColorChange('#4d4d4d','colorBla')" class="colorBtn colorBla"></i>
                </div>
            </div>

        </div>
        <canvas id="drawCanvas"></canvas>
        <!-- 问题详情 -->
        <el-dialog
            title="详情"
            :visible.sync="questionVisible"
            width="490px"
            id="yquestionDetailBox"
            >
            <div class="title" v-if="quizIdClose">正确：{{askEnd[quizIdClose].correctCount}}人</div>
            <div class="isOkName" v-if="quizIdClose">
                {{askEnd[quizIdClose].correctStudents.join(',')}}
            </div>
            <div class="title" v-if="quizIdClose">错误：{{askEnd[quizIdClose].incorrectCount}}人</div>
            <div class="isNoName" v-if="quizIdClose">
               {{askEnd[quizIdClose].incorrectStudents.join(',')}}
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="button-style" @click="questionVisible = false">确 定</button>
            </span>
        </el-dialog>
        <!-- 添加问题 -->
        <el-dialog
            title="添加提问"
            :visible.sync="questionAddVisible"
            width="490px"
            id="yquestionAddBox"
            :close-on-click-modal="false"
            >
            <template>
                <el-radio  v-model="radio" label="1">判断题</el-radio>
                <el-radio  v-model="radio" label="2">问答题</el-radio>
            </template>
            <div class="checkBox">
                <div style="overflow:hidden" >
                    <label class="queNameBox fl">问题：</label>
                    <el-input class="checkInput fl " v-model="checkQueVal" placeholder="请输入内容" type="textarea"  :rows="3" @input="inputData" maxlength="150"></el-input>
                    <p style="position:absolute;  left: 370px; top: 180px; font-size:12px;color:#bbbbbb"> {{titNumber}}/150</p>
                </div>
                <div v-show="radio == 1" style="clear:both; margin-top:10px;">
                    <i class="queAnsBox">答案：</i>
                        <template>
                        <el-radio  v-model="radios" label="1">对</el-radio>
                        <el-radio  v-model="radios" label="2">错</el-radio>
                    </template>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="button-style" @click="questionAddVisible = false">取 消</button>
                <button class="button-style queAddOkBtn" @click="QuestionAddSave">确 定</button>
            </span>
        </el-dialog>
        <!-- 随机点名 -->
        <el-dialog
            title="随堂提问"
            :visible.sync="shortVisible"
            width="600px"
            id="yquestionSetPeo"
            :close-on-click-modal=false
            >
            <div>{{shortAnswer}}</div>
            <div class="nameScrollBox" @click="nameScroll"><i class="iconfont icon-shishidianming"></i><i v-html="nameScrollBtn"></i></div>
            <div class="nameDefault" v-html="nameDefault">
            </div>
            <div style="text-align:center">
                <el-radio v-model="level" label="3">优秀</el-radio>
                <el-radio v-model="level" label="4">良好</el-radio>
                <el-radio v-model="level" label="5">较差</el-radio>
                <el-radio v-model="level" label="6">旷课</el-radio>
            </div>
            <span slot="footer" class="dialog-footer">
                <button class="button-style" @click="cancelFn">取 消</button>
                <button class="button-style queSetOkBtn" @click="questionAddEvent">确 定</button>
            </span>
        </el-dialog>
        <!-- 学生端判断题webscoket -->
        <!-- <div class="judgeDetail" v-if="roles == 'STUDENT' && flag ==true">
            <p>判断题</p>
            <p>{{info.quizName}}</p>
            <el-radio  v-model="radioStudent" label="1">正确</el-radio>
            <el-radio  v-model="radioStudent" label="2">错误</el-radio>
            <div class="button-style" @click="judgeSubmit(info.quizId)">提交</div>
        </div> -->
    </div>
</template>
<script>
    // 绘画
    function Draw(obj,setting){
        this.obj=obj;
        this.type=setting.type||"stroke";
        this.color=setting.color||"#000";
        this.width=setting.width||"1";
    }
    Draw.prototype={
        init:function(){
            this.obj.strokeStyle=this.color;
            this.obj.fillStyle=this.color;
            this.obj.lineWidth=this.width;
        },
            line:function(x,y,x1,y1){
            this.init();
            this.obj.beginPath();
            this.obj.moveTo(x,y);
            this.obj.lineTo(x1,y1);
            this.obj.stroke();
        },
        rect:function(x,y,x1,y1){
            this.init();
            this.obj.beginPath();
            this.obj.rect(x,y,x1-x,y1-y);
            if(this.type=="stroke"){
                this.obj.stroke();
            }else if(this.type=="fill"){
                this.obj.fill();
            }
        },
        circle:function(x,y,x1,y1){
            this.init();
            var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));
            this.obj.beginPath();
            this.obj.arc(x,y,r,0,2*Math.PI);
            if(this.type=="stroke"){
                this.obj.stroke();
            }else if(this.type=="fill"){
                this.obj.fill();
            }
        },
        pen:function(x,y,x1,y1){
            this.init();
            this.obj.save();
            this.obj.lineCap="round";
            this.obj.lineTo(x1,y1);
            this.obj.stroke();
            this.obj.restore();
        }
    }
    import videojs from 'video.js'   //视频
    import CountDown from '@/components/CountDown'
    export default{
        //props: ['websockMsg'],
        components: {
            CountDown
        },
        inject:['reload'],
        data(){
            return {
                //班级Id
                classId:'',
                // 课程ID
                courseId: '',
                // 章节ID
                ChapterId: '',
                // pdfPath
                displayVersion: '',
                // 视频data
                theoryVideoData: '',
                wid:0,
                hei:0,
                // 视频地址
                videoUrl:'',
                // 视频地址防关闭
                videoUrlCopy:'',
                dialogVisible1: false,
                // 视频显示隐藏
                dialogVisible2: false,
                dialogVisible3: false,
                dialogVisible4: false,
                // 学习笔记值
                noteVal:'',
                penColor:'#ff0f00',
                penSize:'6',
                drawType:'pen',
                questionVisible:false, //问题详情显隐
                questionAddVisible:false,//添加提问显隐

                // 添加问题
                radio:'1',//添加问题类型
                checkQueVal:'',//判断题试题名称
                shortQueVal:'',//简单题试题名称
                radios:'1',//判断题对错

                // 问题详情
                questionData: '',
                // 本次index
                activeIndex: '',
                shortVisible:false,//简答题随机点名显隐
                level:'1',//随机点名等级评定
                isStop:false,//点名停止判定
                nameArr:[],  //学生姓名集合 yx 修改
                nameDefault:"名称滚动",
                nameScrollBtn:"随机点名",
                timer:'',
                // 用户状态
                UserStatus:'',
                //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
                roles: '',
                _btn_flag: '',
                // pdf页码
                PdfPage: '',

                //yx添加
                //学生回答
                askEnd: {},
                //回答id判断显隐
                questionIdArr:[],
                //简答题问题
                shortAnswer:'',
                //简答题的问题id
                quizId:'',
                //随机点名后学生id
                studentId:'',
                //正确人数
                correctStudents:'',
                //错误人数
                incorrectStudents:'' ,
                //提问圆点提示
                notificationActive:false,
                //笔记圆点提示
                noteActive:false,
                //学生端回答
                radioStudent:'',
                //消息信息
                info:'',
                //通知消息
                websock: null,
                over: null,
                flag:false,
                //提问的字数
                titNumber:0,
                // 关闭ID存储
                quizIdClose: '',
                //专科版本
                activeName:'',
                //专科数据
                appList:[],
                //占用弹窗
                dialogVirtual:false,
                //存储点击的那个章节id
                clickId:'',

                //专科版本
                openFlag:'',
                //任务id
                TaskId:'',
                //倒计时是否进行
                isShow:false,

                myVideo:'',
                stepType:'',
                singleTask:'',


                 websock2:'',
                 videoAll:'',
                 videocurrentTime:'',

                 websock3:'',
                 actions:{},
                 isPlay:'',
                 isfinisVideo:''


            }
        },
        created () {
            let self = this
            // 从状态管理获取roles
            self.roles = self.$store.state.user.roles[0]
            // 课程ID
            self.courseId = self.$route.query.courseId
            // 章节ID
            self.ChapterId = self.$route.query.chapterId
            // 任务ID
            self.TaskId = self.$route.query.taskId
            //班级Id
            self.classId = self.$route.query.classId
            self._btn_flag = self.$route.query._btn_flag
            //专科版本添加通讯
            //初始化socket
            if(self.TaskId){
                this.InitWebSocket()
            }
            // 初始化获取资源
            self.InitGetResource()
            // 初始化控制状态
            self.InitUserStatus()
            //详情数据
            self.DetailData()

            //yx 添加分辨率判断
            self.$nextTick(()=>{
                if(window.screen.height <= 900){
                    //console.log(window.screen.height,147)
                    $('.blocks').css('max-height','520px')
                    $('.detailBox').css('max-height','520px')

                }
            })
            if(self.roles == 'STUDENT'){
                this.PageTime()
            }



        },

        destroyed: function() {
            //页面销毁时关闭长连接
            this.over()
            if(this.myVideo){
                this.myVideo.dispose()
            }
        },
        methods:{
            //专科版本需求
            //通知webSocket
            InitWebSocket(){
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://"+hostname+"/tes/ws/theory/"+this.TaskId
                self.websock = new WebSocket(wsuri);
                self.websock.onopen = self.websocketonopen;
                self.websock.onmessage = self.websocketonmessage;
                self.over = () => {
                    self.websock.close()
                }
            },
             websocketonopen(){
                console.log('open sucess')
            },
            websocketonmessage(e){ //数据接收
                let self = this
                let redata = JSON.parse(e.data)
                if(redata.type == 10){
                    //时间到了，显示5min的倒计时
                    self.isShow = true
                    $('.maskLeft').css('left','0px')

                }
            },
            //页面统计时间
            PageTime(){
                let hostname = window.location.host
                var target = "ws://"+hostname+"/tes/ws/theory/course/learntime/"+this.ChapterId
                this.websock3 = new WebSocket(target);
                this.websock3.onopen = this.websocketonopen3;
                this.over = () => {
                    this.websock3.close()
                }

                var target5 = "ws://"+hostname+"/tes/ws/theory/course/videotime/"+this.ChapterId
                this.websock2 = new WebSocket(target5);
                this.websock2.onclose = this.websocketclose;


            },
            websocketonopen3(){
                let  actions = {
                    courseId:this.courseId,
                    chapterId :this.ChapterId,
                    classId:this.classId,

                };
                //请根据实际项目需要进行修改
                if(this.websock3.readyState===1 ){
                     this.websocketsend3(JSON.stringify(actions));
                }

            },
            websocketsend3(Data){
                this.websock3.send(Data);
            },

            websocketclose(e){  //关闭
                    console.log('断开连接',e);
            },

            websocketonopen2(){
                this.actions = {
                    courseId:this.courseId,
                    chapterId :this.ChapterId,
                    classId:this.classId,
                    videoSumTime: this.videoAll,
                    videoTime:this.videocurrentTime,
                    isPlay:this.isPlay

                };
                //请根据实际项目需要进行修改
                if(this.websock2.readyState ===1 ){
                     this.websocketsend(JSON.stringify(this.actions));
                }

            },

            websocketsend(Data){//数据发送
                this.websock2.send(Data);
            },
            //是否播放过视频
            isPlayVide(videoTime,videoSumTime){
                let self = this
                self.$http.get('/tes/course/chapter/statistics/theoryVideoIsFinal?videoTime='+videoTime+'&videoSumTime='+videoSumTime+'&courseId='+this.courseId +'&chapterId='+this.ChapterId+'&classId='+this.classId ).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.isfinisVideo = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //关闭实验
            CloseExperiment(){
                let self = this
                self.$http.get('/tes/experiment/course/'+self.TaskId+'/stop').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.isShow = false
                        $('.maskLeft').hide()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //延长1小时
            ExtendTime(){
                let self = this
                self.$http.get('/tes/experiment/course/'+self.TaskId+'/delay').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.isShow = false
                        $('.maskLeft').hide()
                        //再次调取
                        self.reload()
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //继续实验
            ContinueExperiment(){
                let self = this
                $('.maskLeft').hide()
                self.isShow = false
                //此处分为 学生 和 老师
                if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                     self.$router.push({
                        path: "/Teaching/MyCourses/VirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.TaskId,
                        }
                    })
                }else if(self.roles == 'STUDENT'){
                    self.$router.push({
                        path: "/Teaching/MyCourses/STVirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.TaskId,
                        }
                    })
                }


            },
            handleChange(val){
                //val 索引
                this.openFlag = val
                let vals = String(val)
                this.openFlag = vals
            },
            //点击关闭
            deleteFns(){
                $('.detailBox').hide()
            },
            //获取详情数据
            DetailData(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.appList = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //点击详情后正在学的展开
            detalList(){
                this.$forceUpdate()
                let self = this
                let IndexValue;
                for(let i =0; i< self.appList.length; i++){
                    if(self.appList[i].chapterIds.includes(Number(self.ChapterId))){
                        IndexValue = i
                    }
                }
                this.activeName = IndexValue
                //最近学习索引等于打开这项
                this.openFlag = IndexValue
                this.scrollFn(790)
                //判断屏幕分辨率
                if(window.screen.height <= 900){
                    this.scrollFn(540)
                }
                $('.detailBox').stop().slideToggle()
                //隐藏提问 批注弹窗
                $("#onlyDialog").hide();
                $('#issueDialog').hide();

            },
            //自动到最近学习
            //n 代表变量值，考虑到分辨率不同，滚动的距离不同
            scrollFn(n){
                // setTimeout(()=>{
                //     $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top})
                // },10)
                this.$nextTick(()=>{
                    this.$nextTick(()=>{
                        let topValue = $('.studying').parent().offset().top
                        //console.log(topValue,7878)
                        if(topValue > n){
                            $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
                        }

                    })
                })
            },
            // scrollFn2(){
            //     this.$nextTick(()=>{
            //         let topValue = $('.studying').parent().offset().top
            //         if(topValue > 540){
            //             $(".detailBox").animate({scrollTop:$('.studying').parent().offset().top-100},20)
            //         }
            //     })
            // },
            //进入详情
            EnteDetails(item,itembig,items){
                let self = this
                self.singleTask =  item.chapterId
               //self.stepTypeStr = ''
                if(itembig.levels == 2 ){
                    self.stepType = itembig.stepTypeStr
                }else if( itembig.levels == 3){
                    self.stepType = items.stepTypeStr
                }


                //如果为真，可以跳转
                if(item.show){
                    if(this.myVideo){
                        this.myVideo.dispose()
                    }
                    if(item.name == '理论学习'|| item.name =='任务引导'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CoursewareDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                        window.location.reload()
                    }else if(item.name == '教学资源'){
                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseResourceDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '备课材料'){

                        self.$router.push({
                            path:'/Teaching/MyCourses/CourseMaterialDetail',
                            query:{
                                courseId: self.courseId,
                                chapterId: item.id,
                                classId:self.classId,
                                singleChaper:item.id,
                            }
                        })
                    }else if(item.name == '实验学习' ||  item.experimentCourseFlag){
                        if(self.UserStatus == 'NOT_CREATE_CLASS'){
                            self.$router.push({
                                path:'/Teaching/MyCourses/VirtualMachineManual',
                                query:{
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                    stepTypeStr: self.stepType,
                                    singleChaper:self.singleTask
                                }
                            })
                        }else if(self.UserStatus == 'EXIST_CLASS'){
                            self.clickId = item.id
                            self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+item.id).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(res.data.allocated){
                                    self.$http.get('/tes/experiment/course/'+item.id+'/prompt').then(response => {
                                        let res = response.data
                                        if(res.code == '200'){
                                            if(res.data){
                                                // 弹窗是否强制跳转
                                                self.dialogVirtual = true
                                            }else{
                                                if (self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER') {
                                                    // 跳转实验页

                                                    self.$router.push({
                                                        path: "/Teaching/MyCourses/VirtualMachine",
                                                        query: {
                                                            courseId: self.courseId,
                                                            chapterId: item.id,
                                                            classId:self.classId,
                                                            stepTypeStr: self.stepType,
                                                            singleChaper:self.singleTask
                                                        }
                                                    })
                                                }else if(self.roles == 'STUDENT'){
                                                    // 跳转实验页
                                                   self.$router.push({
                                                        path: "/Teaching/MyCourses/STVirtualMachine",
                                                        query: {
                                                            courseId: self.courseId,
                                                            chapterId: item.id,
                                                            classId:self.classId,
                                                            stepTypeStr: self.stepType,
                                                            singleChaper:self.singleTask
                                                        }
                                                    })
                                                }
                                            }
                                        }else{
                                            self.$message.error(res.message)
                                        }
                                    }).catch(err => {
                                        console.log(err)
                                    })
                                }else{
                                    self.$router.push({
                                        path: "/Teaching/MyCourses/VirtualMachineManual",
                                        query: {
                                            courseId: self.courseId,
                                            chapterId: item.id,
                                            classId:self.classId,
                                            stepTypeStr: self.stepType,
                                            singleChaper:item.id,
                                        }
                                    })
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                        }
                    }else if(item.name == '随堂练习'){
                        //分为学生和老师身份
                        if(self.roles == 'STUDENT'){
                            if(self.UserStatus=='NOT_CREATE_CLASS'){
                                self.typesStatus = 1   //没有班级时传1  不显示提交按钮
                            }else{
                                self.typesStatus = 2  //有班级时传2 显示提交按钮
                            }
                            self.$router.push({
                                path: "SPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    typesStatus:self.typesStatus,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }else if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                            self.$router.push({
                                path: "TPractice",
                                query: {
                                    courseId: self.courseId,
                                    chapterId: item.id,
                                    classId:self.classId,
                                    singleChaper:item.id,
                                }
                            })
                        }

                    }

                }
            },
            // 确定跳转实验详情
            VirtualSave(){
                let self = this
                if(self.roles == 'TEACHER' || self.roles == 'MARKET_TEACHER' || self.roles == 'UNIVERSITY_TEACHER'){
                    // 跳转实验页
                     self.$router.push({
                        path: "/Teaching/MyCourses/VirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                            stepTypeStr: self.stepType,
                            singleChaper:self.singleTask
                        }
                    })
                }else if(self.roles == 'STUDENT'){
                     self.$router.push({
                        path: "/Teaching/MyCourses/STVirtualMachine",
                        query: {
                            courseId: self.courseId,
                            chapterId: self.clickId,
                            classId:self.classId,
                            stepTypeStr: self.stepType,
                            singleChaper:self.singleTask
                        }
                    })
                }
                self.dialogVirtual = false
            },

            //视频退出再次进入是之前观看的位置
            videoPre(){
                window.onload=function(){
                    var video = document.getElementById('video');
                    var currentTime = localStorage.getItem("currentTime");
                    video.addEventListener("loadedmetadata",function(){
                        this.currentTime = currentTime;
                    });
                    video.addEventListener("timeupdate",function(){
                        var currentTime = Math.floor(video.currentTime);
                        localStorage.setItem("currentTime",currentTime);
                        //console.log(localStorage.getItem("currentTime"));
                    });
                }
            },
            iframeStudent(){
                let self =this
                let timer = null
                let t1 = 0;
                let t2 = 0;
                let windowChild = window.frames["iframetest"];
                let elChild = window.frames[0].document.getElementById("viewerContainer");
                elChild.onscroll = () => {
                    clearTimeout(timer)
                    self.PdfPage = window.sessionStorage.getItem('pdf-page')
                    t1= self.PdfPage
                    timer = setTimeout(()=>{ //这个方法是为了比较两次滚动值，结束滚动事件
                        t2 = self.PdfPage
                        if(t2 === t1){
                             self.noteCommon()
                         }
                    }, 500);
                }
            },
            iframetest(){
                let self =this
                let timer = null
                let t1 = 0;
                let t2 = 0;
                let windowChild = window.frames["iframetest"];
                let elChild = window.frames[0].document.getElementById("viewerContainer");
                elChild.onscroll = () => {
                    clearTimeout(timer)
                    self.PdfPage = window.sessionStorage.getItem('pdf-page')
                    t1= self.PdfPage
                    timer = setTimeout(()=>{ //这个方法是为了比较两次滚动值，结束滚动事件
                        t2 = self.PdfPage
                        if(t2 === t1){

                             self.commonFn()
                             self.noteCommon()
                         }
                    }, 500);
                }
                //yx 点击页面任意位置隐藏笔记和提问弹窗
                // elChild.onclick = () => {
                //     self.$nextTick(function(){
                //         $('#issueDialog').hide();
                //         $("#onlyDialog").hide();
                //    })

                // }
                // this.addWheel($(window.frames[0].document).find('#viewerContainer').get(0),function(event){
                //     var e=e||event;
                //     console.log(e)
                // })
                // let iframe = document.getElementById("iframetest")
                // let iwindow = iframe.contentWindow;
                // console.log(iwindow.document)
                // console.log(iframe.onload)
                // windowChild.window.onscroll = function() {
                //     //变量t是滚动条滚动时，距离顶部的距离
                //     var t = windowChild.document.documentElement.scrollTop || windowChild.document.body.scrollTop;
                //     console.log(t,111);
                // };

                // this.$nextTick(() => {
                //     windowChild.window.onload = () =>{
                //         console.log(111)
                //     }
                // })
                // windowChild.onscroll = function() {
                //     //变量t是滚动条滚动时，距离顶部的距离
                //     var t = windowChild.document.documentElement.scrollTop || windowChild.document.body.scrollTop;
                //     console.log(t,111);
                // };
            },

            //关闭左侧
            closeTime(val){
                if(val){
                    $('.maskLeft').css('left','-200px')
                }
            },
            // 初始化控制状态
            InitUserStatus(){
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/user-status').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.UserStatus = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //字数
            inputData(){
                var txtVal = this.checkQueVal.length;
                if(txtVal==150){
                    this.titNumber =150
                }else{
                    this.titNumber = txtVal++
                }
            },
            // 初始化获取资源
            InitGetResource() {
                let self = this
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/detail/resource?type=1').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if (res.data.courseware.displayVersion.length > 0) {
                            self.displayVersion = res.data.courseware.displayVersion[0].filePath
                        }
                        self.theoryVideoData = res.data.theoryVideo.displayVersion
                        // self.videoUrl = res.data.theoryVideo.displayVersion[0].filePath
                        if (res.data.theoryVideo.displayVersion.length > 0) {
                             self.videoUrlCopy = res.data.theoryVideo.displayVersion[0].filePath
                            //self.videoUrlCopy =  'https://www.runoob.com/try/demo_source/movie.mp4'
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // yx 修改 随机提问名字滚动
            nameScroll(){
                //名字滚动
                if(this.nameArr.length>0){
                    if(this.isStop == false){
                        let n = 0;
                        this.isStop = true;
                        this.nameScrollBtn = "停止点名";
                        let self = this;
                        self.timer = setInterval(()=>{
                            self.nameDefault = self.nameArr[n].name
                            self.studentId = self.nameArr[n].id
                            n++;
                            if(n>=self.nameArr.length){
                                n = 0;
                            }

                        },200);

                    }else{
                        clearInterval(this.timer);
                        this.nameScrollBtn = "随机点名";
                        this.isStop = false;
                    }
                }else{
                    this.$message({
                        message: '暂无人员',
                        type: 'warning'
                    })
                    return
                }

            },
            // 点击提问
            getShortEvent(quizType, quizId,quizName){
                // quizType 1. 判断题 2.选择题
                // quizId 问题id
                let self = this
                if(quizType == 1){
                    self.$http.post('/tes/quiz/'+quizId+'/ask').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            // 初始化问题列表
                            self.questionList()

                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })

                }else{
                    //yx 修改
                     self.$http.get('/tes/quiz/'+self.courseId+'/students').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(res.data.length>0){
                                self.nameArr = res.data.map((item,i)=>{
                                    return {
                                    name:item.name,
                                    id:item.id
                                    }
                                })
                            }
                        }else{
                            self.$message.error(res.message)
                        }
                        //清空滚动事件及内容
                        self.level =''
                        clearInterval(this.timer);
                        this.nameScrollBtn = "随机点名";
                        self.nameDefault ='名称滚动'
                        self.shortVisible = true
                        self.shortAnswer = quizName
                        self.quizId = quizId

                }).catch(err => {
                    console.log(err)
                })


                }
            },
            // 删除提问
            DeleteQuestion(quizId){
                let self = this
                self.$confirm('是否删除提问?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.delete('/tes/quiz/'+quizId).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.$message({
                                type: 'success',
                                message: '删除成功!'
                            })
                            // 初始化问题列表
                            self.questionList()
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }).catch(() => {
                });

            },
            //关闭提问 闪烁消失
            closeDialg(){
                this.notificationActive =false
            },
            //学生端提交问题
            judgeSubmit(quizId){
                let self = this
                if(self.radioStudent==''){
                    self.$message({
                        message: '请选择正确答案',
                        type: 'warning'
                    })
                    return
                }
                self.$http.post('/tes/quiz/'+quizId+'/answer',{
                    answer:self.radioStudent==1?true:false,
                    quizNumber:self.info.quizNumber
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '提交成功',
                            type: 'success',
                        })
                        self.flag = false

                    }else{
                        self.$message.error(res.message)
                        self.flag = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 提问问题列表
            questionList(){
                this.commonFn()
                $('#issueDialog').show()
            },
            //yx提问公共接口(只有教师才有)
            commonFn(){
                let self = this
                self.questionData = ''
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                self.$http.get('/tes/quiz?chapterId='+self.ChapterId+'&pageNumber='+PdfPage).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.size>0){
                           self.questionData = res.data
                           self.notificationActive =true

                        }else{
                           self.notificationActive =false
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 关闭判断题提问
            CloseQuestion(quizId){
                let self = this
                self.$http.post('/tes/quiz/'+quizId+'/end-ask').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.askEnd[quizId] =  res.data
                        if(self.questionIdArr.indexOf(quizId)==-1){
                            self.quizIdClose = quizId
                            self.questionIdArr.push(quizId)
                        }
                        // for(let i = 0; i < self.askEnd.length; i++){
                        //     if(self.askEnd[i].quizId == res.data.quizId){
                        //     }else{
                        //         self.quizIdClose = quizId
                        //         self.askEnd.push(res.data)
                        //     }
                        // }
                        // if(self.askEnd.indexOf(quizId) == -1){
                        //     self.askEnd.push(quizId)
                        // }


                        self.correctStudents = res.data.correctStudents.join(',')
                        self.incorrectStudents = res.data.incorrectStudents.join(',')

                        //将问题id添加到数组中
                        // if(self.questionIdArr.indexOf(quizId)==-1){
                        //     self.questionIdArr.push(quizId)
                        //     console.log(self.questionIdArr,121212)
                        // }
                        // 初始化问题列表
                        self.questionList()

                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //yx取消点名
            cancelFn(){
                this.shortVisible = false
                this.nameScroll()
            },
            //yx 随机点名确定
            questionAddEvent(){
                let self = this
                if(self.nameScrollBtn=='停止点名'){
                    self.$message({
                        message: '请停止随机点名',
                        type: 'warning'
                    })
                    return
                }
                if(self.studentId=='' || self.level==''|| self.nameDefault=='名称滚动'){
                    self.$message({
                        message: '请选择学生回答问题，并评分',
                        type: 'warning',
                    })
                     return
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '正在保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                self.$http.post('/tes/quiz/'+self.quizId+'/assess',{
                    userId: Number(self.studentId),
                    performance: Number(self.level),
                    courseId:Number(self.courseId),
                    classId: Number(self.classId)
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                       self.shortVisible =false
                       self.commonFn()
                        loading.close()
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                    loading.close()
                })
            },
            // 添加问题
            issueAddEvent(){
                let self = this
                // 初始化弹窗值
                self.radio = '1'
                self.checkQueVal = ''
                self.radios = '1'
                self.titNumber= 0
               // $('#issueDialog').hide()
                //问题添加
                self.questionAddVisible = true;
            },
            // 保存问题
            QuestionAddSave() {
                let self = this
                let data = {}
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                if(self.radio == 1){
                    data = {
                        quizName: self.checkQueVal,
                        chapterId: self.ChapterId,
                        pageNumber: PdfPage,
                        quizType: self.radio,
                        judgementAnswer: self.radios == '1' ? true : false
                    }
                }else if(self.radio == 2){
                    data = {
                        quizName: self.checkQueVal,
                        chapterId: self.ChapterId,
                        pageNumber: PdfPage,
                        quizType: self.radio
                    }
                }
                 const loading = this.$loading({
                    lock: true,
                    text: '正在保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                 })
                self.$http.post('/tes/quiz',data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '添加提问成功',
                            type: 'success'
                        })
                        self.questionAddVisible = false
                        //添加完成后，小点开始闪烁
                        self.notificationActive =true
                        //添加问题成功后数据直接显示
                        self.commonFn()
                        loading.close()
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                }).catch(err => {
                    console.log(err)
                    loading.close()
                })
            },
            getDetailEvent(quizId){
                this.quizIdClose = quizId
                //获取本次详情
                this.questionVisible = true
            },
            penColorChange(val,name){
                //获取绘图颜色
                this.penColor = val;
                 $(".colorBtn").attr("style","");
                 $("."+name).css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid"+this.penColor});
            },
            penSizeChange(val,name){
                //获取绘图大小
                this.penSize = val;
                 $(".point>span").css("background","#dddddd");
                 $("."+name+">span").css("background","#1aad19");
            },
            drawTypeChange(val,name){
                //绘图类型
                this.drawType = val;
                if(this.drawType == "pen"){
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $(".pen").css("color","#1277eb");
                }else{
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $("."+name).css("border-color","#1277eb");
                }
            },
            // 视频弹窗
            videoDialog(){
                let self = this
                self.videoUrl = self.videoUrlCopy
                self.dialogVisible2 = true
                // self.$nextTick(()=>{
                //     self.videoPre()
                // })

                //this.InitGetResource()
                this.$nextTick(()=>{
                        self.myVideo = videojs('videoSource', {
                        bigPlayButton: true,
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        controls :true,
                        height: 500,
                        width: 400,
                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                    },function onPlayerReady() {
                         //视频总时长
                        self.videoAll = this.duration()
                        console.log( self.videoAll,999)
                        this.on('play', function () { //视频播放
                            self.videoAll = this.duration()
                           //  console.log( self.videoAll,6666)
                            self.videoAll  =  self.videoAll.toFixed(1)
                            self.videocurrentTime = this.currentTime()
                            self.videocurrentTime =  self.videocurrentTime.toFixed(1)
                            self.isPlay = '1'

                            if(self.roles == 'STUDENT' && self.isfinisVideo == 0  && self.classId){
                                self.isPlayVide(self.videocurrentTime,self.videoAll)
                                self.websocketonopen2()
                            }
                        });
                        this.on('pause', function () {
                            //暂停获得秒数
                            self.videoAll = this.duration()
                            self.videoAll  =  self.videoAll.toFixed(1)
                            self.videocurrentTime = this.currentTime()
                            self.videocurrentTime = self.videocurrentTime.toFixed(1)
                            self.isPlay = '0'
                            if(self.roles == 'STUDENT' && self.isfinisVideo == 0){
                                self.websocketonopen2()
                            }

                        });
                    })
                     self.myVideo.src(self.videoUrlCopy)
                     self.myVideo.load(self.videoUrlCopy)
                 })
                //yx 添加禁止笔记和提问弹窗
                $('#issueDialog').hide()
                $("#onlyDialog").hide();
                $('.detailBox').hide();
            },
            // 关闭视频弹窗
            closeVideoDialog() {
                let self = this
                // self.videoUrl = ''
                // var audio = document.getElementById('video');
                // audio.pause(); //暂停
                this.$nextTick(()=>{
                    this.myVideo.pause()
                 })


            },
            // 关闭笔记
            closeNoteWindow(){
                $("#onlyDialog").hide();
            },
            // 打开笔记获取笔记信息
            openNoteWindow(){
                // let self = this
                // let PdfPage = window.sessionStorage.getItem('pdf-page')
                // self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/resource/notes?notesType=1&pageNumber='+PdfPage).then(response => {
                //     let res = response.data
                //     if(res.code == '200'){
                //         self.noteVal = res.data
                //
                //     }else{
                //         self.$message.error(res.message)
                //
                //     }
                // }).catch(err => {
                //     console.log(err)
                // })
                this.noteCommon()
                $("#onlyDialog").show()
                $('#issueDialog').hide() //yx 修改
               // $('#videoSource').hide()
                $('.detailBox').hide();
                this.dialogVisible2 = false

            },
            //yx笔记接口公用
            noteCommon(){
                let self = this

                let PdfPage = window.sessionStorage.getItem('pdf-page')
                //console.log(PdfPage,33333);
                self.$http.get('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/resource/notes?notesType=1&pageNumber='+PdfPage).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.length>0){
                            self.noteVal = res.data
                            self.noteActive =true
                        }else{
                            self.noteActive = false
                            self.noteVal = ''
                        }

                    }else{
                        self.$message.error(res.message)
                        self.noteActive = false
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 学习笔记保存
            NoteSave(){
                let self = this
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.ChapterId+'/resource/notes',{
                    notesType: 1,
                    pageNumber: PdfPage,
                    content: self.noteVal
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        // 后增加
                        self.noteCommon()
                        $("#onlyDialog").hide() //不关闭
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 打开提问
            openQuestion() {
                let self = this
                let PdfPage = window.sessionStorage.getItem('pdf-page')
                self.questionData = ''
                self.$http.get('/tes/quiz?chapterId='+self.ChapterId+'&pageNumber='+PdfPage).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$nextTick(() => {
                            self.questionData = res.data
                        })
                        $('#issueDialog').show()
                        //打开提问后 小蓝点也要闪烁
                        //self.notificationActive = false
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
                $("#onlyDialog").hide()  //yx修改
                $('.detailBox').hide();
            },
            // 关闭提问
            closeIssueWindow(){
                $("#issueDialog").hide()
                //123this.questionList()
            },
            drawEvent(){
                //绘图
                let canvas = document.getElementById("drawCanvas");
                let obj = canvas.getContext("2d");
                let colorchoose = this.penColor;
                let widthchoose = this.penSize;
                let typechoose=$(".type");
                let back=$(".recall");
                let clear=$(".clean");
                let exit = $(".exit");
                let linewidth="1";
                let cutflag=false;
                let screenWidth=document.documentElement.clientWidth;
                let screenHeight=document.documentElement.clientHeight;
                let width=screenWidth;
                let height=screenHeight;
                canvas.width=width;
                canvas.height=height;
                let iscut=true;
                let style="stroke";
                let color=this.penColor;
                let arr=[];
                let self = this;
                // 撤销
                back.click(function(){
                    arr.pop();
                    obj.clearRect(0,0,width,height);
                    if(arr.length>0){
                        obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
                    }
                })
                // 清除
                clear.click(function(){
                    arr=[];
                    obj.clearRect(0,0,width,height);

                })
                //退出
                exit.click(function(){
                    arr=[];
                    obj.clearRect(0,0,width,height);
                    $(".type").css({"color":"#474747","border-color":"#474747"});
                    $(".pen").css("color","#1277eb");
                    $(".point>span").css("background","#dddddd");
                    $(".point1>span").css("background","#1aad19");
                    $(".colorBtn").attr("style","");
                    $(".colorRed").css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid #ff0f00"});
                    self.drawType = "pen";
                    self.penSize = "6";
                    self.penColor = "#ff0f00";
                    $("#drawBox,#drawCanvas").hide();

                })
                let x,y,w,h;
                let lx,ly,lw,lh;
                let cutdata;

                canvas.onmousedown=function(e){
                    x=e.offsetX;
                    y=e.offsetY;

                    if(self.drawType=="pen"){
                        obj.beginPath();
                        obj.moveTo(x,y);

                    }
                    let draw=new Draw(obj,{type:style,color:self.penColor,width:self.penSize});//实例化构造函数
                    canvas.onmousemove=function(e){
                        w=e.offsetX;
                        h=e.offsetY;
                        if(self.drawType!="eraser"){
                            obj.clearRect(0,0,width,height);
                            if(arr.length!=0){
                                obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
                            }
                        }
                        if(cutflag&&self.drawType=="cut"){
                            if(iscut){
                                obj.clearRect(lx,ly,lw-lx,lh-ly);
                            }
                            var nx=lx+(w-x);
                            var ny=ly+(h-y);
                            obj.putImageData(cutdata,nx,ny);
                        }else if(self.drawType=="poly"){
                            draw[type](x,y,w,h,n);
                        }else{
                            draw[self.drawType](x,y,w,h);
                        }
                    }
                    document.onmouseup=function(){
                        canvas.onmousemove=null;
                        document.onmouseup=null;

                        arr.push(obj.getImageData(0,0,width,height));
                    }
                }
            },
            drawShowEvent(){
                // 画布显示111
                $("#drawBox,#drawCanvas").show();
                //yx 修改 关闭笔记和提问
                $("#onlyDialog").hide();
                $('#issueDialog').hide();
                $('.detailBox').hide();
                this.drawEvent();
                $(".colorRed").css({"background":"#ffffff","height":"8px","width":"8px","border":"4px solid #ff0f00"});
            },
            issueEvent(){

            },
            // 二期需求
            // 批注清除内容
            clearContent() {
                let self = this
                if(self.noteVal.length == 0){
                    return
                }
                self.noteVal = ''
            }

        },
        mounted(){
            let screenWidth=document.documentElement.clientWidth;
            let screenHeight=document.documentElement.clientHeight;
            this.wid = screenWidth;
            this.hei = screenHeight-8;
        },
        // watch: {
        //     'websockMsg': {
        //         handler: function(newval , oldval) {
        //             let self = this
        //             console.log(newval)
        //             // if(newval.type == 5){
        //         //}
        //         },
        //         deep: true
        //     }
        // }
    }
</script>
<style>
    #onlyDialog .el-dialog .el-dialog__body .el-textarea textarea{
        resize: none;
    }
    .dialog-virtual .el-dialog__footer{
        text-align: center;
    }

</style>
<style scoped>
 .video-js{
        width: 100%;
        height: 400px;
    }
.el-dialog>>>.el-dialog__footer{
    text-align: center;
}
.blocks::-webkit-scrollbar{
    width: 5px;
    height: 5px;
}
.blocks::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius:50px;
}
.blocks{
    overflow-y: scroll;
    max-height: 760px;
}
.el-collapse{
    border:none;
}
.el-collapse-item>>>.el-collapse-item__header{
    background: #2d3136;
    color: #fff;
    border-bottom:none;
    text-align: center
}
.el-collapse-item>>>.el-icon-arrow-right{
    display: none;
}
.el-collapse-item>>>.el-collapse-item__content{
    background: #26292c;
    color: #a2a3a4;
    padding: 5px 20px;

}
.el-collapse-item__content>div{
    padding: 4px 0;
}
.el-collapse-item>>>.el-collapse-item__wrap{
    border-bottom:none;
}
.el-textarea{
  width: 300px;
}
.checkBox>>>.el-input__inner{
    width: 300px;
}
.coursewareBox{
    overflow-y: hidden
}
.el-dialog__wrapper{
    box-shadow: 0px 0px 15px #4a4a4a42;
}
/* .judgeDetail{
    width: 300px;
    min-height: 100px;
    background: #fff;
    position: absolute;
    top: 260px;
    right: 25px;
    border-radius: 3px;
    box-shadow: 0 2px 3px  #eee;
    padding: 20px 30px
}
.judgeDetail>p{
    line-height: 25px;
    margin-bottom: 10px
} */
.askEnd{
    font-weight: normal;
    display: block
}
#onlyDialog .el-dialog .el-dialog__footer{
    text-align: center;
}

    /* 问题添加盒子 */
#yquestionAddBox .el-dialog__body{
    padding: 37px 42px;
}
#yquestionAddBox .button-style,#yquestionSetPeo .button-style{
    padding: 0;
    height: 32px;
    width: 90px;
    margin: 0 auto;
}
#yquestionAddBox .dialog-footer,#yquestionSetPeo .dialog-footer{
    display: block;
    text-align: center;
}
#yquestionAddBox .checkBox{
    margin-top: 25px;
}
#yquestionAddBox .el-input__inner{
    width: 330px;
    margin-left: 18px;
}
#yquestionAddBox .queNameBox{
    margin-bottom: 22px;
    display: block;
}
#yquestionAddBox .queAnsBox{
   margin-right: 18px;
}
#yquestionAddBox .queAddOkBtn,#yquestionSetPeo .queSetOkBtn{
    margin-left: 20px;
}
#yquestionAddBox .el-input{
    width: auto;
}
/* 随堂练习 */
#yquestionSetPeo .el-dialog__body{
    padding: 62px 128px;
}
#yquestionSetPeo .el-dialog__body>div:nth-of-type(1){
    font-size: 16px;
    color: #474747;
    margin-bottom: 20px;
    line-height: 25px;
    padding: 0 10px;
}
#yquestionSetPeo .el-dialog__body .nameScrollBox{
    text-align: center;
    font-size: 16px;
    color: #1277eb;
    cursor: pointer;
}
#yquestionSetPeo .el-dialog__body  .nameDefault{
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 28px;
}
   /* 问题详情盒子 */
#yquestionDetailBox .el-dialog__body{
    padding: 50px 60px;
}
#yquestionDetailBox .title{
    font-size: 16px;
    margin-bottom: 25px;
    color: #727272;
}
#yquestionDetailBox .isOkName,#yquestionDetailBox .isNoName{
    font-size: 14px;
    color: #727272;
    line-height: 1.7;
}
#yquestionDetailBox .isOkName{
    margin-bottom: 46px;
}
#yquestionDetailBox .button-style{
    padding: 0;
    height: 32px;
    width: 90px;
    margin: 0 auto;
}
#yquestionDetailBox  .dialog-footer{
    display: block;
    text-align: center;
}
</style>
<style scoped lang="scss">
 @import "./../../../styles/ypublic.scss";
.askPoint{
    position: relative;
    &:after {
        position: absolute;
        content: '';
        width:8px;
        height: 8px;
        background: #1277eb;
        border-radius: 3px;
        top: -9px;
        right: -19px;
    }

}
.notePoint{
    position: relative;
    &:after {
        position: absolute;
        content: '';
        width:8px;
        height: 8px;
        background: #1277eb;
        border-radius: 3px;
        top: -11px;
        right: -20px;
    }

}
// 绘画盒子
.styleactive{
    color: #ffa800;
    background-color:#fff;
    box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
}
 #drawCanvas{
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1;
    cursor: pointer;
    display: none;
}

#drawBox{
    width:320px;
    height: 70px;
    position: absolute;
    z-index: 10;
    top:140px;
    right: 95px;
    background:$white;
    border-radius:5px;
    font-size: $fs16;
    display: none;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    i{
        float: left;
        height: 18px;
        margin-top:26px;
        cursor: pointer;
        margin-left: 25px;
          color: #474747;
    }
    .pen{
        color:#1277eb;
    }
    .squre{
        width: 20px;
        border: 1px solid $title-gray;
        height: 16px;
    }
    .circle{
        width: 16px;
        border: 1px solid #000; //yx修改
        height: 16px;
        border-radius: 50%;

    }
    .pen,.recall{
        font-size: 22px;
        padding-top: 5px;//yx修改
         margin-top: 31px;
    }
    #penOption{
        height: 44px;
        width: 230px;
        position: absolute;
        top: 80px;
        left: 10px;
        div:nth-of-type(1){
            width: 0;
            height: 0;
            border-top: 0 solid transparent;
            border-bottom: 8px solid white;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            margin: 0 auto;
        }
        div:nth-of-type(2){
            background: $white;
            border-radius: $br5;
            height: 36px;
            width: 230px;
            margin: 0;
            .colorBtn{
                height: 16px;
                width: 16px;
                 margin: 10px 0 0 12px;
            }
            .colorRed{
                background: #ff0f00;
            }
            .colorYel{
                background: #ffbe00;
            }
            .colorBul{
                background: #1a9bff;
            }
            .colorGre{
                background: #1aad19;
            }
            .colorBla{
                background: #4d4d4d;
            }
            .point1,.point2,.point3{
                width: 14px;
                height:14px;
                margin: 11px 0 0 12px;
            }
            .point1{
                span{
                    background:#1aad19;
                    border-radius: $br50;
                    height: 6px;
                    width: 6px;
                    display: block;
                    margin: 5px;
                }
            }
            .point2{
                span{
                    background:$gray;
                    border-radius: $br50;
                    height: 10px;
                    width: 10px;
                    display: block;
                    margin: 2px;
                }
            }
            .point3{
                span{
                    background:$gray;
                    border-radius: $br50;
                    height: 14px;
                    width: 14px;
                    display: block;
                    margin: 0;
                }
            }
        }
    }
}
// 笔记盒子 提问盒子
    #onlyDialog{
        // height: 396px;
        width: 490px;
        position: absolute;
        left: initial;
        top: 210px;
        bottom: initial;
        right: 95px;
        display: none;
    }
    #issueDialog{
        width: 410px;
        position: absolute;
        left: initial;
        top: 300px; //yx修改
        bottom: initial;
        right: 95px;
        max-height: 500px;
        overflow-x: hidden
    }
    #onlyDialog .el-dialog,#issueDialog  .el-dialog{
        border-radius: 5px;
        margin: 0!important;
        padding: 0;

    .el-dialog__header {
        background: $white;

        height: auto;
        line-height:initial;
        padding: 20px 20px 10px;

        .el-dialog__title {
            color: #070e28;
            line-height: 24px;
            font-size: 16px;
            float: left;
        }
    }

    .el-dialog__headerbtn {
        top: 20px;

        .el-dialog__close {
            color: #070e28;

            &:hover {
                color: #070e28;
            }
        }
    }
    #noteVal{
        overflow: auto;
    }
}
    //提问盒子
    .issueAddBtn{
        width: 368px;
        height: 46px;
        border: 1px solid #e1e1e1;
        text-align: center;
        line-height: 46px;
        font-size: 20px;
        display: block;
        color: #b8b8b8;
        border-radius: 5px;
        cursor: pointer;
    }
    #issueDialog .el-dialog__body ul li p{
        min-height: 30px;
    }
    #issueDialog .el-dialog__body ul li p>span{
        float: left;
        line-height: 1.7;
    }
    #issueDialog .el-dialog__body ul li p>span.delBtnBox{
        float: right;
    }
    #issueDialog .el-dialog__body ul li p:nth-of-type(2){
        font-size: $fs14;
    }
    #issueDialog .el-dialog__body ul li {
        margin-bottom: 25px;
        padding-bottom: 18px;
        border-bottom: 1px solid #e8e8e8;
    }
    #issueDialog .el-dialog__footer{
        padding: 0 20px 20px;
    }
    #issueDialog .el-dialog__body{
        padding: 30px 20px 0;
    }
    .answered{
        width: 90px;
        margin-right: 7px;
    }
    .answereds{
        width: 236px;
        margin: 0 18px 0 14px;
        a{
            text-decoration:underline;
            color: #385899;
        }
    }
    .active{
        margin-right: 4px;
    }
    .delBtnBox{
        float: right;
    }
    .level{
        width: 151px;
        margin-right: 18px;
    }
    .titleHead{
        width: 50px;
        font-size: $fs16;
        color: #385899;
        margin-right: 20px;
    }
    .titleName{
        width: 230px;
        font-size: $fs16;
        color: $title-gray;
        word-break: break-all;
        margin-right: 18px;
    }
    #issueDialog .el-dialog__body button{
        height: 22px;
        width: 50px;
        font-size: 14px;
        padding: 0;
        line-height: 22px;
        margin-top: -3px;
    }
    //主体
    #jx-contain{
        position: relative;
        .sideBox{
            position: absolute;
            top:50px;
            right:25px;
            width: 60px;
            background: #1c1f21;
            color: $white;
            text-align: center;
            border-radius: 5px;
            .sideBoxActive{
                color: #6d6d6d;
                pointer-events: none;
                cursor: default;
                opacity: 0.6;
                .iconfont{
                    display: block;
                    margin-bottom: 8px;
                    font-size: 19px;
                    color: #6d6d6d;
                }
            }
            li{
                height: 36px;
                width: 25px;
                display: block;
                font-size: 12px;
                margin: 30px auto 38px;
                position: relative;
                cursor: pointer;
                color: #dfe0e0;
                .iconfont{
                    display: block;
                    //margin-bottom: 8px;
                    font-size: 19px;
            }
            &:hover{
                color: #fff;
            }

            }

            .clearMarginBottom {
                margin-bottom: 0;
            }

            .stastics {
                height: 20px;
                width: 100%;
                margin: 10px 0 15px;
                a {
                    margin: 0 auto;
                    display: block;
                    width: 35px;
                    height: 17px;
                    border: 1px solid #6D6D6D;
                    border-radius: 2px;
                    line-height: 15px;
                    color: #DFDFDF;
                    &:hover{
                        color: #fff;
                        border: 1px solid #DFDFDF;
                    }
                }
            }
        }

    }
    // 暂无数据
    .no-data-tips{
        padding-top: 10%;
        text-align: center;
        &>p{
            margin: 30px 0;
            color: #9999;
            font-size: 16px
        }
    }

    // 二期需求
    .el-annotation, .el-notes{
        .button-style{
            &.clear{
                color: #bbbbbb;
                border: 1px solid #bbbbbb;
                &:hover{
                    color: #bbbbbb;
                    border: 1px solid #bbbbbb;
                    background: #fff;
                }
                &.active{
                    color: #1277eb;
                    border: 1px solid #1277eb;
                    &:hover{
                        background: #1277eb;
                        color: #fff;
                    }
                }
            }
        }
    }
    //专科版本需求
    //详情盒子
    .maskLeft{
        position: absolute;
        left: -200px; //-200px
        top: 0;
        width: 200px;
        height: 100%;
        background:rgba(0,0,0,.8);
        transition: left .9s;
        -webkit-transition: left .9s;
        z-index: 999999;
        .maskLeft-list{
            text-align: center;
            margin-top: 120px;
            .icon-ziyuanldpi1{
                font-size: 25px;
                color: #1890ff;
            }
            .icon-shijian00{
                font-size: 17px;
                color: #fff;
                vertical-align:-webkit-baseline-middle
            }
            .icon-ziyuanldpi{
                font-size: 13px;
                color: #fff;
                padding-right: 4px;
            }
            p{
                font-size: 16px;
                color: #fff;
            }
            .time{
                margin-top: 45px;

            }
            .btnlist{
                margin-top: 60px;
                .btns{
                    border: none;
                    background: #1890ff;
                    color: #fff;
                    margin-bottom: 18px;
                    width: 110px;

                }
                .btns-continue{
                    margin-left:8px;
                    &:hover{
                        background: #0d73d0
                    }
                }
                .btns-delay{
                    padding-left:5px;
                    &:hover{
                        background: #0d73d0
                    }
                }
                .btns-close{
                    background:#ff4d4f;
                      &:hover{
                        background: #d82f30
                    }
                }
            }
        }
    }
    .detailBox{
        width: 400px;
        position: fixed;
        top: 50px;
        bottom: initial;
        right: 95px;
        background: #26292c;
        max-height: 760px;
        border-radius:4px;
        display: none;
        .chapterList-top{
            overflow: hidden;
            height: 50px;
            line-height: 50px;
            padding: 0 18px;
            &>p{
                line-height: 50px;
                color: #a2a3a4;
            }
            i{
                color: #a2a3a4;
                &:hover{
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
        .infoName{
            display: inline-block;
            padding:2px 0 2px 15px;
            &:hover{
               span{color: #1374e4;}
               .crile{
                    background: #1374e4;
                }
            }
        }
        .icon-diannao-copy{
            font-size: 14px;
            margin-left: 8px;
            color: #1374e4;
            vertical-align: super;
        }
        .courseName{
            margin: 5px 0;
            cursor: pointer;
            .icon-tubiaozhizuomoban1{
                color: #1374e4;
                font-size: 16px;
            }
            &:hover{
                color: #fff;

            }

        }
    }

    .collapsTitle{
        text-align: left;
        // margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-left: 22px;
        color: #a2a3a4;
        .collapsTitle_span{
            max-width: 270px;
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 13px;
        }
        .icon-tubiaozhizuomoban1{
            color: #1374e4;
            font-size: 16px;
        }
        .icon-chaibaoguoqujian{
            color: #a2a3a4;
            font-size: 14px;
        }
        &:hover{
            color: #fff;
            .icon-chaibaoguoqujian{
                 color: #fff;
            }
        }
    }
    .icon-shijian00{
        color: #1374e4;
        margin-left: 5px
    }

    .crile{
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #a2a3a4;
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 9px;

    }
    .studying{
       color: #1374e4;
    }
    .crileBg{
        background: #1374e4;
    }
    .detailbox{
        //padding:2px 0 2px 15px;
        cursor: pointer;
        &:hover{
            color: #1374e4;
            .crile{
                background: #1374e4
            }
        }
    }
    .Tiltlefiles{
        display: inline-block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 210px;
        cursor: pointer;
    }


    .icon-42{
        font-size: 12px;
        vertical-align: text-bottom;
        margin-left: -2px;
        margin-right: 5px;
    }
    .dialogList{
        .dialog-content{
            text-align: center;
            i{
            font-size: 50px;
                color: #d6d6d6;
                display: block;
                margin-top: 25px;
            }
            p{
                font-size: 14px;
                text-align: center;
                line-height: 18px;

            }
            .handbook-item{
                text-align: center;
                margin-top: 30px;
            }
        }
        .btnlist{
            .button-style{
                width: 90px;
            }
        }
    }




</style>
